<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!--  

	*SlideShare Karaoke -- Slideshow Randomizer*

	Uses the SlideShare.net API to select a random Slideshow for a given tag.
	Fetches only those slideshows that are released under the Creative Commons
	License and have allowed downloads of their slideshows.

	Author : Lalit Patel
	Website: http://www.lalit.org
	Website: http://www.slideshare.net
	License: Creative Commons GPL 2.0
	         http://creativecommons.org/licenses/GPL/2.0/
	Version: 0.2
	Updated: July 10, 2007 6:28pm

	Thanks : Dipankar Sarkar (http://www.desinerd.com)
	         Amit Ranjan (http://www.amitranjan.com)
	         Rashmi Sinha (http://www.rashmisinha.com)

	--
	Uses icons from FamFamFam (http://www.famfamfam.com). Thanks Mark!

-->

<html>
<head>
	<title>SlideShare Toys / Karaoke</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<script type="text/javascript" src="incs/js/prototype151.js"></script>
	<script type="text/javascript" src="incs/js/scriptaculous.js"></script>
	<script type="text/javascript" src="incs/js/swfobject.js"></script>

	<style type="text/css">
	/*reset.css | Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt | version: 2.2.2*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
	/*fonts.css | Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt | version: 2.2.2*/body{font:11px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}
	
	/*karaoke.css | Code licensed under the CC GPL: http://creativecommons.org/licenses/GPL/2.0/ */
	BODY {background-color:#000; color:#999; font-size:11px;}
	A, A:link, A:visited {color:#999; text-decoration:underline;}
	A:hover {color:#ccc;}
	#ss_head {font-size:36px; color:#00A8AA; border-bottom:1px solid #444;}
	#ss_head H1 {text-indent:-1000px; height:45px; width:315px; background:url('incs/img/title.gif') no-repeat 10px 15px;}
	#ss_head .css_logo {text-align:right; padding:5px 10px; float:right; width:200px;}
	#ss_tool {}
	#ss_body {margin:25px 0pt; text-align:center;}
	#ss_foot {border-top:1px solid #444; color:#999; padding:5px 5px 7px;}
	#ss_mosiac_title {margin:0pt auto; text-align:center; width:610px; *width:617px; height:24px; *height:28px; border:3px solid #444; border-bottom:0px none; color:#999; font-size:15px; padding:2px 1px 2px 0pt;}
	#ss_mosiac {margin:0pt auto; text-align:left; width:610px; *width:617px; height:440px; *height:447px; border:3px solid #444; padding:0pt 1px 1px 0pt;}
	#ss_mosiac .css_thumb {margin-left:1px; margin-top:1px; width:60px; height:43px; opacity:0.4; filter:alpha(opacity=40);}
	#ss_mosiac .css_highlight {opacity:0.9 !important;}
	#ss_dialog {background-color:#eee; position:absolute; z-index:500; color:#333;}
	#ss_dialog .css_c {text-align:center; padding:10px;}
	#ss_dialog H3 {font-size:15px; color:#009999; margin:5px 0pt 0pt; border-bottom:1px solid #ddd; padding-bottom:5px; text-align:center;}
	#ss_dialog TABLE {color:#444; border:0px none; border-collapse:separate; border-spacing:3px; margin:7px 0pt; width:100%; *width:94%}
	#ss_dialog .css_actions {margin:0pt; border-top:1px solid #ddd; padding-top:10px; text-align:center;}
	#ss_player {padding:5px;}
	#ss_player_toolbar {padding:5px 5px 0pt; height:35px; *height:40px; font-size:14px; color:#009999; text-align:left; line-height:1.2; font-weight:bold;}
	#ss_thumbnail {width:170px; height:128px; border:1px solid #666; margin-left:14px}
	#ss_intro {text-align:center; padding:30px 10px 10px; font-size:17px; letter-spacing:0px}	
	#ss_progress {z-index:600; width:243px; height:50px;}
	#ss_progress_bg {position:absolute; background:#000; opacity:0.4; filter:alpha(opacity=40); height:50px; width:243px; left:0; top:0}
	#ss_progress_text {background: transparent url('incs/img/throbber.gif') no-repeat 15px 50%; color:#ccc; z-index:610; font-size:24px; padding:8px; padding-left:60px;}
	.css_input {color:#333; background:#ccc; border:1px inset #999; padding:1px 2px;}
	.css_input:focus{background:#F4F4F4;}
	.css_button {color:#444; font-size:13px; font-weight:bold; height:24px; *height:22px}
	.css_actions A,.css_actions A:link,.css_actions A:visited {color:#444; text-decoration:none; border-bottom:1px dashed #999;}
	.css_actions A:hover {color:#444; text-decoration:none; border-bottom: 0px none; padding-bottom:1px;}
	.css_icon {vertical-align:middle; width:16px; height:16px; margin-right: 3px;}
	.css_icon_td {font-weight:bold; vertical-align:top; padding:3px 0pt;}
	.css_plus {font-size:24px;}
	.css_thorbber {background: transparent url('incs/img/throbber.gif') no-repeat 50% 50%}
	.css_thorbber_w {background: transparent url('incs/img/throbber_w.gif') no-repeat 50% 50%}
	.css_close {display: block; width: 14px; height: 14px; float: right; background: url('incs/img/close.gif') no-repeat;}
	.css_close:hover {background: url('incs/img/close.gif') 14px 0px;}
	.css_small {font-size:12px; color:#777}
	.css_gray {color:#aaa; cursor:default}
	.css_clear {clear:both;}
	.css_right {float:right;}
	.css_left {float:left;}
	</style>
</head>

<body>
	<div id="ss_head">
		<div class='css_logo'>
			<a target="_blank" href="http://www.slideshare.net/"><img src="incs/img/sslogo_notext.gif" border="0" align="absmiddle" title="SlideShare"></a> + 
			<a target="_blank" href="http://www.creativecommons.org/"><img src="incs/img/cclogo_notext.gif" border="0" align="absmiddle" title="Creative Commons"></a>
		</div>
		<h1>slideshare <font color="white">karaoke</font></h1>
		<div class="css_clear"></div>
	</div>

	<div id="ss_tool"></div>

	<div id="ss_body">
		<div id="ss_mosiac_title">Welcome to <font color="white">slideshare karaoke</font>!</div>
		<div style="display:none;" id="ss_dialog"><div class="css_c">Some info about the selected Slideshow.</div></div>
		<div style="display:none;" id="ss_progress"><div id="ss_progress_bg"></div><div id="ss_progress_text"><!-- <img src="incs/img/throbber.gif" align="absmiddle"> -->Randomizing...</div></div>
		<div id="ss_mosiac"></div>
	</div>

	<div id="ss_foot">
		<span class="css_right"><!-- <a target="_blank" href="http://www.slideshare.net/privacy">Privacy Policy</a> &nbsp;|&nbsp;  --><a target="_blank" href="http://www.slidesharetoys.com">Back to SlideShare Toys</a> &nbsp;|&nbsp; <a target="_blank" href="http://www.slideshare.net/feedback">Feedback</a></span>
		Powered by <a target="_blank" href="http://www.slideshare.net">SlideShare</a>. Licensed under <a target="_blank" href="http://creativecommons.org/licenses/GPL/2.0/">Creative Commons GPL 2.0</a>
	</div>
	<script type="text/javascript">


	var SSK = {};

	// config variables.
	SSK.MAX_SHOWS     = 100;	// total num of slideshows on the page.
	SSK.BASE_TAG      = ""; // tag by which we filter the results. (shh!!! shut up!)
	SSK.MOSIAC_TITLE  = '<span class="css_right" id="ss_mosiac_buttons"><input type="submit" value=" Randomize " class="css_button" onclick="SSK.randomize();return false;" style="width:90px"> ';
	SSK.MOSIAC_TITLE += '<input type="submit" value=" Search another tag " class="css_button" onclick="SSK.initKaraoke();return false;" style="width:140px"></span>';
	SSK.MOSIAC_TITLE += '<span class="css_left" id="ss_result"></span>';
	SSK.WELCOME       = 'Welcome to <font color="white">slideshare karaoke</font>!';
	SSK.THROBBER      = '<img src="incs/img/thorbber.gif" id="ss_throbber">';
	SSK.THUMB_HEIGHT  = 44;
	SSK.THUMB_WIDTH   = 61;

	
	/**
	 * Initialize the Karaoke. Setup intial variables the statge and preload images.
	 */
	SSK.initKaraoke = function() {
		SSK.restartKaraoke();
		// preloading icons
		$w('i.download.gif i.slides.gif i.slideshow.gif i.tag.gif i.time.gif i.user.gif i.views.gif i.slideshare.gif throbber.gif throbber_w.gif close.gif').each(function(src) {
			var img = $(document.createElement('IMG'));
			img.src = 'incs/img/' + src; 
			SSK.preloadedImgs[src] = img;
		});
	};
	Event.observe(window, 'load', SSK.initKaraoke);

	/**
	 *
	 */
	SSK.restartKaraoke = function() {
		SSK.slideshows    = null;	// stores the slides that are being displayed.
		SSK.spotlights    = [];		// slideshows already selected for spotlight.
		SSK.brightImages  = [];		// list of images that are turned on (opacity: 0.9)
		SSK.curSpotlight  = null;	// holds the reference to the current spotlight.
		SSK.curTag        = '';		// holds the current tag.
		SSK.preloadedImgs = [];
		SSK.randomCount   = 40;		// num of slideshows to highlight when we are randomizing.
		SSK.SWFObject     = null;	// will hold the reference to the SWFObject that writes the player.

		$('ss_dialog').hide();
		SSK.showIntro();
	};


	/**
	 * Show the first screen.
	 */
	SSK.showIntro = function(interval) {
		var html  = '<div id="ss_intro">';
		//html += '<img src="incs/img/sslogo.gif" align="absmiddle" alt="SlideShare.net"> <span class="css_plus">&nbsp; and &nbsp;</span> <img src="incs/img/cclogo.gif" align="absmiddle" alt="Creative Commons">';
		html += '<br><br><br><form action="/" onsubmit="SSK.loadImages($(\'ss_tag\').value); return false;">';
		html += 'Enter the tag to fetch related slideshows: ';
		html += '<input type="text" name="ss_tag" size="15" class="css_input" value="" id="ss_tag">';
		html += '<br><br>';
		html += '<input type="submit" value=" Fetch Slideshows " class="css_button">';
		html += '</form><br><br><br><br><br><br><br><br><br><br>';
		html += '<span class="css_small">*only slideshows with a Creative Commons License will be fetched</span></div>'
		$('ss_mosiac').update(html).removeClassName('css_thorbber');
		$('ss_mosiac_title').update(SSK.WELCOME);
		$('ss_tag').focus();
	}; 


	/**
	 * Loads all the slideshows for a given tag to form a mosiac on the page.
	 * After fetching all the slideshows through an AJAX call, it make repeated 
	 * calls to SSK.loadImage to load a single image after specified interval.
	 * The default interval is 150ms
	 */
	SSK.loadImages = function(tag, interval) {
		if (!tag || tag.strip() == '') {
			return;
		}
		tag = tag.strip();
		SSK.curTag = tag;
		interval = !interval || interval < 150 ? 150 : interval;		// sanitize interval. Less than 50 is suicide!

		var mosiac = $('ss_mosiac').update();
		$('ss_mosiac_title').update('Loading slideshows for the tag \'<font color="white">' + tag.truncate(30).escapeHTML() + '</font>\'...');

		// show the indicator
		mosiac.addClassName('css_thorbber');

		// Fetch the slideswhows now.
		// firt make the params ready.
		var params = {};
		params.ptag = SSK.BASE_TAG;
		params.tag = tag;
		new Ajax.Request('fetch.php', {parameters:params, onSuccess:function(t) {

				SSK.slideshows = $A(t.responseText.evalJSON());
				//alert('La complete, ' + SSK.slideshows.length + ' slideshows!');
				
				if (SSK.slideshows.length <= 0) {
					SSK.restartKaraoke();
					$('ss_mosiac_title').update('We couldn\'t find any slideshows tagged \'<font color="white">' + tag.truncate(20).escapeHTML() + '</font>\'. Try another tag.');
					alert('We couldn\'t find any slideshows tagged \'' + tag + '\'.\nTry another tag.');
					return;
				}

				// calculate the number of images that will be glowed in case the total slideshows is < 100
				SSK.randomCount = Math.ceil(SSK.slideshows.length * 0.4);

				if (SSK.slideshows.length > 50 ){
					SSK.randomCount = Math.ceil(SSK.slideshows.length * 0.3);
				} else if(SSK.slideshows.length > 20){
					SSK.randomCount = 20
				} else {
					SSK.randomCount = SSK.slideshows.length;
				}

				// remove the thorbber
				mosiac.removeClassName('css_thorbber');

				// show the thumbnails gracefully :)
				for(i=0; i<SSK.slideshows.length; i++) {
					var img = SSK.slideshows[i];
					setTimeout("SSK.loadImage('" + img[7] + "', " + img[0] + ", \"" + img[3].split('"').join('\\"').truncate(50).escapeHTML() + "\", " + i + ");", interval*i);
				}
			}, onFailure: function() {
				alert('OOPS! Something went terribly worng!');
		}});
	}; 


	/**
	 * Load an image in the mosiac(thumbnail of slideshow) on the page.
	 * Appends the image in the 'mosiac' div.
	 */
	SSK.loadImage = function(url, id, title, i) {
		var img = $(document.createElement('IMG'));
		//img.src = 'thumbs/' + url + '-thumbnail-2.jpg';
		img.src = 'https://s3.amazonaws.com:443/slideshare/' + url + '-thumbnail';
		img.ss_id = id;
		img.id = "ss_img_" + i;
		img.title = title;
		img.alt = title;
		img.className = "css_thumb";
		$('ss_mosiac').appendChild(img);

		// if this is the last image, show the Randomize button.
		if (i+1 == SSK.slideshows.length){
			$('ss_mosiac_title').update(SSK.MOSIAC_TITLE);
			$('ss_result').update('&nbsp;' + SSK.slideshows.length + ' CC-licensed Slideshows tagged \'<font color="white">' + SSK.curTag.truncate(25).escapeHTML() + '</font>\'');
		}
	};


	/**
	 * Highlighs a number of random images.
	 */
	SSK.randomize = function(interval) {
		// sanitize interval. Less than 300 is suicide!
		interval = !interval || interval < 100 ? 100 : interval;
		
		$('ss_dialog').hide();
		$$('#ss_dialog .css_c').first().update();
		SSK.brightImages = [];
		SSK.showProgress();



		for (i=0; i<SSK.randomCount; i++) {
			setTimeout("SSK.glowImage();", interval*i);
		}
	};


	/**
	 * Shows the 'Randomizing' progress status
	 */
	SSK.showProgress = function() {
		var mosiac = $('ss_mosiac').addClassName('');
		var pos = Position.cumulativeOffset(mosiac);
		var dim = mosiac.getDimensions();

		var progress = $('ss_progress');
		var t_dim = progress.getDimensions();
		
		// hide the buttons.
		$('ss_mosiac_buttons').hide();

		progress.style.position = 'absolute';
		progress.style.left	= (pos[0] + dim.width/2 - t_dim.width/2) + "px";
		progress.style.top	= (pos[1] + dim.height/2 - t_dim.height/2) + "px";

		progress.show();
	};


	/**
	 * Hides the 'Randomizing' progress status
	 */
	SSK.hideProgress = function() {
		Effect.Fade($('ss_progress'), {duration:0.3});
	};


	/**
	 * Highlighs a single random image.
	 * TODO: Random number shoudn't be replicated.
	 */
	SSK.glowImage = function() {
		var id = 0;
		// ensure the image is not already brightened.
		do {
			id = Math.round(Math.random() * 1000) % SSK.slideshows.length;
		} while(SSK.brightImages.indexOf(id) != -1);

		SSK.brightImages.push(id);

		// brighten the image.
		$("ss_img_" + id).setStyle({opacity:0.9});

		// change the title
		//$('ss_mosiac_title').update(SSK.slideshows[id][3].split('"').join('\\"').truncate(50).escapeHTML());

		if (SSK.brightImages.length != SSK.randomCount){
			// dim the currently bright thumbnail
			setTimeout("SSK.dimImage(" + id + ")", 200);
/*
		} else if (SSK.spotlights.indexOf(id) != -1){
			// if the selected presentation has already been spotlighted, choose another one.
			// if all slideshows have been spotlighted atleast once, reset the array.
			if (SSK.spotlights.length == SSK.slideshows.length)	{ 
				SSK.spotlights = [];
			}
			SSK.glowImage();
*/
		} else {
			// add the selected slideshow to the already selected array.
			SSK.spotlights.push(id);
			// show the dialog with info
			setTimeout("SSK.showDialog(" + id + ")", 1000);
		}
	};


	/**
	 * Highlighs a single random image.
	 * TODO: Random number shoudn't be replicated.
	 */
	SSK.dimImage = function(id) {
		if(id == undefined) {
			return;
		}
		new Effect.Opacity($("ss_img_" + id), {from: 0.9, to: 0.5,duration:0.2});
	};


	/** 
	 * Blow up the selected slideshow. Show some jazzy effects and open up a
	 * dialog box which will be populated by info about the slideshow.
	 */
	SSK.showDialog = function(id) {
		// hide the loading thorbber
		SSK.hideProgress();

		// store the reference to the current spotlight
		SSK.curSpotlight = id;

		var diag = $('ss_dialog');
			
		// the chosen one.
		var img  = $('ss_img_' + id);

		// the 4th element in the 2nd row. Its the position where we should position the dialog.
		//var img13 = $('ss_img_12');		

		var pos = Position.cumulativeOffset(img);
		diag.style.position = 'absolute';
		diag.style.top	  = pos[1] + "px";
		diag.style.left	  = pos[0] + "px";
		diag.style.width  = img.offsetWidth+1  + "px";
		diag.style.height = img.offsetHeight+1 + "px";

		// pulsate the selected slideshow
		Effect.Pulsate(img,{duration:1,pulses:3,queue:{position:'front', scope:'dailog'}})

		// show the dialog slowly
		Effect.Appear(diag,{duration:1,queue:{position:'end', scope:'ddailog'}});

		// move to the 2nd row 3rd image
		pos = Position.cumulativeOffset($('ss_mosiac'));
		// because the mosiac border size is 3 and margin = 1
		pos[0] += 3 + 1;
		pos[1] += 3 + 1;
		pos[0] += SSK.THUMB_WIDTH * 2;	// 2 tumbnails left;
		pos[1] += SSK.THUMB_HEIGHT * 1;	// 1 thumbnail down;
		new Effect.Move(diag,{duration:1,x:pos[0], y:pos[1], mode: 'absolute', queue:{position:'parallel', scope:'dailog'}});

		// dim the selected slideshow
		new Effect.Opacity($("ss_img_" + id), {duration:0.3,from:0.9, to:0.5,queue:{position:'end', scope:'dailog'}});

		// unfold the dialog
		Effect.unFold(diag,{queue:{position:'end', scope:'dailog'}, afterFinish: function(evObj){setTimeout("SSK.showInfo("+id+");",400);}}, 599, 798);	//6 cols and 8 rows. -1 pixel in right and bottom
	};


	/**
	 * Hides the info dialog box.
	 */
	SSK.hideDialog = function() {
		var dialog_info = $$('#ss_dialog .css_c').first()
		Effect.Fold($('ss_dialog'), {duration:0.4, afterFinish: function(eObj){dialog_info.update()}});
		// show the buttons after the slideshow is selected so no one messes-up with them.
		$('ss_mosiac_buttons').show();
	};


	/**
	 * Displays info about the selected PPT.
	 */
	SSK.showInfo = function(id) {
		if(id == undefined) {
			return;
		}

		var data = SSK.slideshows[id];

		// add the scrollbar in the dialog. Its unset by scriptaculous.
		//$('ss_dialog').style.overflow = 'auto';

		// clear the dialog.
		var dialog = $$('#ss_dialog .css_c').first();
	
		// add a close button
		var close = $(document.createElement('A'));
		close.href = "javascript:void(SSK.hideDialog())";
		//close.onClick = function() {$('ss_dialog').hide();return false;};
		close.className = "css_close";
		dialog.appendChild(close);

		// slidehow thumbnail.
		var div = $(document.createElement('DIV'));
		div.align = 'center';
			img = $(document.createElement('IMG'));
			img.src = 'https://s3.amazonaws.com:443/slideshare/' + data[7] + '-thumbnail';
			img.id = 'ss_thumbnail';
			img.alt = data[3];
			img.title = data[3];
		div.appendChild(img);
		dialog.appendChild(div);

		// slideshow title
		var h3 = $(document.createElement('H3'));
		h3.appendChild(document.createTextNode(data[3].truncate(90)));
		dialog.appendChild(h3);


		var html  = '<table border="0"><tr>';
		html += '<td width="100" class="css_icon_td"><img src="incs/img/i.user.gif" class="css_icon">Uploaded by:</td>';
		html += '<td>' + data[9].user_login + ', ' + data[5] + '</td>';
		html += '</tr><tr><td class="css_icon_td"><img src="incs/img/i.slides.gif" class="css_icon">Slides:</td>';
		html += '<td>' + data[1] + '</td>';
		html += '</tr><tr><td class="css_icon_td"><img src="incs/img/i.views.gif" class="css_icon">Views:</td>';
		html += '<td>' + data[2] + '</td>';
		html += '</tr><tr><td class="css_icon_td"><img src="incs/img/i.tag.gif" class="css_icon">Tags:</td>';
		html += '<td>' + data[6].split(',').join(', ') + '</td>';
		html += '</tr></table>';

		html += '<div class="css_actions">';
		html += '<img src="incs/img/i.slideshow.gif" class="css_icon"><a href="javascript:void(SSK.playSlideshow(' + id + '))">Play Slideshow</a> &nbsp;';
		html += '<img src="incs/img/i.slideshare.gif" class="css_icon"><a target="_blank" href="http://www.slideshare.net/' + data[9].user_login + '/'  + data[4] + '" target="_blank">View on SlideShare</a> &nbsp;';
		if (data[8].strip() != '') { // check if download is available.
			html += '<img src="incs/img/i.download.gif" class="css_icon"><a target="_blank" href="http://www.slideshare.net/' + data[9].user_login + '/'  + data[4] + '/download" target="_blank">Download File</a> &nbsp;';
		} else {
			html += '<img src="incs/img/i.download.gif" class="css_icon"><span class="css_gray" title="The user has chosen not to allow downloads for this slideshow.">Download unavailable</span>';
		}
		html += '</div>';

		dialog.innerHTML += html;
	};
	

	/**
	 * Show the dialg
	 */
	SSK.playSlideshow = function(id) {
		
		// hide the loading thorbber
		var diag_c = $$('#ss_dialog .css_c').first();
		// fade the contents and hide them.
		Effect.Fade(diag_c,{duration:0.5});
	
		// the 2nd element in the 1nd row. Its the position where we should position the dialog.
		//var img2 = $('ss_img_1');
		var diag = $('ss_dialog');

		// move to the 1st row 2nd image
		var pos = Position.cumulativeOffset($('ss_mosiac'));
		// because the mosiac border size is 3 and margin = 1
		pos[0] += 3 + 1;
		pos[1] += 3 + 1;
		pos[0] += SSK.THUMB_WIDTH * 1;	// 1 tumbnails left;
		pos[1] += SSK.THUMB_HEIGHT * 0;	// 0 thumbnail down;

		new Effect.Move(diag,{duration:0.5,x:pos[0], y:pos[1], mode: 'absolute', queue:{position:'first', scope:'dailog_play'}});
		// Old:	365x323		New: 487x400 (477x390 = player width)
		Effect.unFold(diag,{queue:{position:'end', scope:'dailog_play'}, afterFinish: function(evObj){setTimeout("SSK.showPlayer(" + id + ");",400);}}, 133.4, 125);	//8 cols and 10 rows. -1 pixel in right and bottom
	};


	/**
	 * Show the player :)
	 */
	SSK.showPlayer = function(id) {

		var dialog = $('ss_dialog');

		// see if slideshow exists. (the id is valid)
		if (SSK.slideshows[id]) {
			var data = SSK.slideshows[id];
		} else {
			alert('Invalid slideshow slected. Please try again.');
			dialog.hide();
			SSK.restartKaraoke();
			return;
		}

		// add a close button
		var div = $(document.createElement('DIV'));
		div.id = 'ss_player_toolbar';
		var close = $(document.createElement('A'));
		close.href = "javascript:void(SSK.hidePlayer())";
		close.className = "css_close";
		div.appendChild(close);
		div.appendChild(document.createTextNode(data[3].truncate(120)));
		dialog.appendChild(div);

		// create a div in which we will show the player
		div = $(document.createElement('DIV'));
		div.id = 'ss_player';
		dialog.appendChild(div);
		dialog.addClassName('css_thorbber_w');


		// write the player into the dialog with the help of SWF Object
		SSK.SWFObject = new SWFObject('https://s3.amazonaws.com:443/slideshare-audio/karaokeplayer.swf?inContest=0&totalSlides=' + data[1] + '&startSlide=1&presentationId=' + data[0] + '&doc=' + data[7] + '', 'karaokeplayer', '477', '390', '7', '#eeeeee');
		SSK.SWFObject.addParam('allowFullScreen', 'true');	
		SSK.SWFObject.addParam("allowScriptAccess", "always");
		setTimeout("SSK.SWFObject.write('ss_player');",1000);
	};
	function loadDataForSlide() {}		// callback for 

	/**
	 * Hide the player and restore to orignal size, + show the info .... WTF?
	 */
	SSK.hidePlayer = function() {

		// fade contents
		Effect.Fade('ss_player', {duration:0.5, queue:{position:'first', scope:'dailog_hide'}});
		Effect.Fade('ss_player_toolbar', {duration:0.5, queue:{position:'parallel', scope:'dailog_hide'}});

		// Reset the Player reference.
		SSK.SWFObject = null;

		//restore size	
		var diag_c = $$('#ss_dialog .css_c').first();
		var diag = $('ss_dialog');
		diag.removeClassName('css_thorbber_w');

		// move to the 2nd row 3rd image
		var pos = Position.cumulativeOffset($('ss_mosiac'));
		// because the mosiac border size is 3 and margin = 1
		pos[0] += 3 + 1;
		pos[1] += 3 + 1;
		pos[0] += SSK.THUMB_WIDTH * 2;	// 2 tumbnails left;
		pos[1] += SSK.THUMB_HEIGHT * 1;	// 1 thumbnail down;

		// Old:	365x323		New: 487x439 (477x390 = player width)
		Effect.unFold(diag,{queue:{position:'end', scope:'dailog_hide'}}, 75, 80);	//8 cols and 10 rows. -1 pixel in right and bottom
		new Effect.Move(diag,{duration:0.5, x:pos[0], y:pos[1], mode: 'absolute', queue:{position:'end', scope:'dailog_hide'}});

		//show orignal info.
		Effect.Appear(diag_c, {duration:0.5, queue:{position:'end', scope:'dailog_hide'}, afterFinish: function(evObj){
			diag.removeChild($('ss_player'));
			diag.removeChild($('ss_player_toolbar'));
		}});
	};

	/**
	 * function to unfold an item (modified the srcipt.aclo.us Fold function)
	 * opt are options if u need to overr
	 * x, y are percent of scale on x and y axis
	 */
	Effect.unFold = function(element,opt,xp,yp) {
		element = $(element);
		var oldStyle = {
			top: element.style.top,
			left: element.style.left,
			width: element.style.width,
			height: element.style.height};
		element.makeClipping();
		return new Effect.Scale(element, xp, Object.extend({
			duration:0.3,
			scaleContent: false,
			scaleY: false,
			afterFinishInternal: function(effect) {
				new Effect.Scale(element, yp, {
					duration:0.3,
					scaleContent: false,
					scaleX: false
				});
			}}, arguments[1] || {}
		));
	};


	</script>

</body>
</html>


